<template>
	<view class="order-list">
		<view v-for="(order, index) in orders" :key="index" class="order-card">
			<view class="order">
				<view class="order-header">
					<span class="order-id">订单编号：{{ order.orderNum }}</span>
					<span class="order-status">交易成功</span>
				</view>

				<view class="order-body">
					<view class="product-section">
						<view class="product-image-container">
							<image :src="path + order.axGood.goodImg.split(',')[0]" mode="aspectFill"></image>
						</view>

						<view class="product-details">
							<view class="product-title">{{ order.axGood.goodName }}</view>
							<u-rate :value="order.axGood.goodStars" disabled></u-rate>

							<view class="quantity">数量：x{{ order.totalNum }}</view>
							<view class="right-bottom">
								<text>
									<span>￥</span>
									{{ order.totalFee }}
								</text>
							</view>
						</view>
					</view>
				</view>

				<view class="order-footer">
					<span class="order-date">{{ order.createTime }}</span>
					<!-- <view v-if="" class="botton-btn">
					领取5
					<image src="/static/user/Frame20.png" style="width: 32rpx; height: 32rpx; margin-left: 5rpx" mode="aspectFill"></image>
				</view> -->
					<span v-if="!bottonBool" class="order-status-completed">已完成</span>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import api from '@/api/index.js';
export default {
	name: 'record',
	props: {
		orders: {
			type: Array,
			required: true
		},
		bottonBool: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			path: api.getPath()
		};
	}
};
</script>

<style lang="scss" scoped>
.order {
	background-color: #ffffff;
	margin: 30rpx;
	border-radius: 30rpx;
}
.botton-btn {
	display: flex;
	align-items: center;
	padding: 7rpx 10rpx;
	border: 1px solid #f88725;
	border-radius: 50rpx;
	font-size: 24rpx;
	color: #f05a39;
}
.order-list {
	.order-card {
		margin-bottom: 16px;
		.order-header {
			display: flex;
			justify-content: space-between;
			padding: 16px;

			.order-id {
				font-size: 14px;
				color: #666;
			}

			.order-status {
				font-size: 14px;
				color: #f56c6c;
			}
		}

		.order-body {
			padding: 0 16px;

			.product-section {
				display: flex;
				border-bottom: 1px dashed #f0f0f0;
				border-radius: 4px;
				overflow: hidden;

				.product-image-container {
					image {
						width: 260rpx;
						height: 210rpx;
						border-radius: 20rpx;
					}
				}

				.product-details {
					flex: 1;
					padding-left: 16px;
					display: flex;
					flex-direction: column;
					justify-content: space-evenly;

					.right-bottom {
						display: flex;
						align-items: center;
						text {
							font-family: MiSans, MiSans;
							font-weight: 500;
							font-size: 30rpx;
							color: #f05a39;
							text-align: center;
							font-style: normal;
							text-transform: none;
							span {
								font-size: 23rpx;
							}
						}
					}
					.product-title {
						font-weight: 550;
						font-size: 28rpx;
						color: #000000;
						display: -webkit-box;
						-webkit-line-clamp: 1; /* 限制为两行 */
						-webkit-box-orient: vertical;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.quantity {
						font-size: 14px;
						color: #666;
						margin-bottom: 10px;
					}

					.points {
						font-size: 14px;
						color: #f56c6c;
					}
				}
			}
		}

		.order-footer {
			display: flex;
			justify-content: space-between;
			padding: 16px;

			.order-date {
				font-size: 14px;
				color: #999;
			}

			.order-status-completed {
				font-size: 14px;
				color: #999;
			}
		}
	}
}
</style>
